import Link from 'next/link'
import {connect} from 'react-redux'
import { Carousel } from 'antd-mobile';
// import { createForm } from 'rc-form';
import { cutString, rankingType, defultImg }  from '../../utils'
import styles from './BottomBanner.module.scss';

const BottomBanner = (props) => {
  const {fastestBrand} = props
  const linkUrl = (index) => {
    return index === 0 ? '/brandindex' : '/hotelindex'
  }
  return (
    <section className={styles["bottom-banner-box"]}>
      <Carousel dots={false} autoplay={true} infinite={true}  autoplayInterval={5000}>
        {
          fastestBrand.map((item, index) => (
              <div className={styles["banner-box"]} key={`bottomBanner-${index}`}>
                <h2 className={styles["title"]}>{item.month}月上升最快品牌之星</h2>
                  <div className={styles["company-detail"]} >
                    <div className={styles["top"]}>
                      <div className={styles["logo"]}>
                        <Link href={{ pathname: linkUrl(index), query: { id: item.id }}}  as={`${linkUrl(index)}/${item.id}`} >
                          <img src={defultImg(item.logoUrl, (index === 0 ? 'mbi' : 'mci'))}  />
                        </Link>
                      </div>
                      <div className={styles["company"]}>
                        <div className={styles["company-title"]}>
                          <h3 className={styles["name"]}>
                            <Link href={{ pathname: linkUrl(index), query: { id: item.id }}}  as={`${linkUrl(index)}/${item.id}`} >
                              <a>{cutString(item.name, 10)}</a>
                            </Link>
                          </h3>
                          <span className={styles["figure"]}>{rankingType(item.riseRank).rankingNum}</span>
                        </div>
                        <p>{cutString(item.intro, 38)}</p>
                      </div>
                    </div>
                    <div className={styles["bottom"]}>
                      <div className={styles["last-time-ranking"]}>上月排名：<span>{item.lastMonthRank}</span></div>
                      <div className={styles["current-ranking"]}>本月排名：<span>{item.ranking}</span></div>
                      <div className={styles["recently-ranking"]}>升降：<span className={rankingType(item.riseRank).styleC}>{rankingType(item.riseRank).rankingNum}</span></div>
                    </div>
                  </div>
              </div>
            )
          )
        }
      </Carousel>
    </section>
  )
}
const mapStateToProps = (state, ownProps) => {
  return {
    fastestBrand: state.fastestBrand
  }
}


export default connect(mapStateToProps)(BottomBanner)

